<template>
  <div id="app">
    <ul>
      <li v-for="item in product" :key="item.id">
        <h3>{{ item.title }}</h3>
        <button @click="addCrat(item)">添加到购物车</button>
      </li>
    </ul>
    <div class="line"></div>
    <h2>购物车</h2>

    <ul>
      <li v-for="item in items" :key="item.id">
        <h2>{{ item }}</h2>
      </li>
    </ul>



  </div>
</template>

<script>

import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      product: [
        {
          title: '华为',
          id: 1,
        },
        {
          title: '小米',
          id: 2,
        },
        {
          title: 'OPPO',
          id: 3,
        },
        {
          title: 'vivo',
          id: 4,
        },
      ]
    }
  },
  
  computed: {
    ...mapGetters( [ 'items' ] )
  },

  methods: {
    // ...mapMutations( {
    //   pushCart: 'PUSH_CART'
    // } )

    ...mapActions( ['addCrat'] )
  },
}
</script>

<style>
  .line {
    width: 100%;
    border: 1px solid #ccc;
  }
</style>
